<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2673097_48rfn6lutg4.css">
</head>
<body>
    <!-- header -->
    <header>
        <div class="headerInfo">
            <ul class="listLeft">
                <li><a href="javascript:;"><img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg" alt=""></a></li>
                <li><a class="active" href="javascript:;">首页</a></li>
                <li><a href="javascript:;">沸点</a></li>
                <li><a href="javascript:;">资讯</a></li>
                <li><a href="javascript:;">小册</a></li>
                <li><a href="javascript:;">活动</a></li>
                <li><a href="javascript:;">开发者大会</a></li>
                <li><input type="text" placeholder="搜索"></li>
            </ul>
            <ul class="listRight">
                <!-- <li><input type="text" placeholder="搜索"></li> -->
                <li><a class="devCenter" href="javascript:;">创作者中心</a></li>
                <li><a class="write" href="javascript:;">写文章 <i class="iconfont icon-caret-down"></i></a></li>
                <li><a class="loginBtn" href="./login.html">登录</a></li> 
                <li class="userfaceLi">
                    <a class="userface" href="javascript:;">
                        <!-- <img src="" alt=""> --> 牵
                    </a>
                    <div class="subMenu">
                        <div><a href="javascript:;">写文章</a></div>
                        <div><a id="logoutBtn" href="javascript:;">退出登录</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- nav -->
    <nav>
        <ul>
            <li><a class="active" href="javascript:;">推荐</a></li>
            <li><a href="javascript:;">后端</a></li>
            <li><a href="javascript:;">前端</a></li>
            <li><a href="javascript:;">Andriod</a></li>
            <li><a href="javascript:;">iOS</a></li>
            <li><a href="javascript:;">人工智能</a></li>
            <li><a href="javascript:;">开发工具</a></li>
            <li><a href="javascript:;">代码人生</a></li>
            <li><a href="javascript:;">阅读</a></li>
        </ul>
    </nav>
    <!-- content -->
    <div class="content">
        <div class="articleList">
            <ul class="articleListHeader">
                <li><a class="active" href="javascript:;">热门</a></li>
                <li><a href="javascript:;">最新</a></li>
                <li><a href="javascript:;">热榜</a></li>
            </ul>
            <!-- 文章列表 -->
            <ul class="articleListContent">
                <li>
                    <div class="contentInfo">
                        <!-- 文章作者信息 -->
                        <div>
                            <a class="hoverInfo" href="javascript:;">Southyin</a>
                            <a href="javascript:;">23小时前</a>
                            <a class="hoverInfo" href="javascript:;">前端</a>
                            ·
                            <a class="hoverInfo" href="javascript:;">JavaScript</a>
                        </div>
                        <!-- 文章标题 -->
                        <h4>Java学习指南</h4>
                        <!-- 文章内容介绍 -->
                        <div>
                            <a href="javascript:;">安装JDK，下载地址...</a>
                        </div>
                        <!-- 文章浏览点赞信息 -->
                        <div class="viewInfos">
                            <i class="iconfont icon-eye"> 9137</i>
                            <i class="iconfont icon-zan hoverInfo"> 337</i>
                            <i class="iconfont icon-message hoverInfo"> 41</i>
                        </div>
                    </div>
                    <div class="contentImg">
                        <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5367ba25a0a4092bcf821a8f2b88212~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp" alt="">
                    </div>
                </li> 
                <li>
                    <div class="contentInfo">
                        <!-- 文章作者信息 -->
                        <div>
                            <a class="hoverInfo" href="javascript:;">Southyin</a>
                            <a href="javascript:;">23小时前</a>
                            <a class="hoverInfo" href="javascript:;">前端</a>
                            ·
                            <a class="hoverInfo" href="javascript:;">JavaScript</a>
                        </div>
                        <!-- 文章标题 -->
                        <h4>Java学习指南</h4>
                        <!-- 文章内容介绍 -->
                        <div>
                            <a href="javascript:;">安装JDK，下载地址...</a>
                        </div>
                        <!-- 文章浏览点赞信息 -->
                        <div class="viewInfos">
                            <i class="iconfont icon-eye"> 9137</i>
                            <i class="iconfont icon-zan hoverInfo"> 337</i>
                            <i class="iconfont icon-message hoverInfo"> 41</i>
                        </div>
                    </div>
                    <div class="contentImg">
                        <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5367ba25a0a4092bcf821a8f2b88212~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp" alt="">
                    </div>
                </li> 
            </ul>
        </div>
        <div class="infoList">
            <div>
                <div>
                    <i style="color: #fc3;" class="iconfont icon-calendar"> 早上好！</i>
                    <a href="javascript:;">去签到</a>
                </div>
                <div class="signInfo">
                    连续签到赢掘金惊喜好礼
                </div>
            </div>
            <div>
                <h5>掘金 - juejin.cn</h5>
                <div class="desc">一个帮助开发者成长的社区</div>
                <div>
                    <select>
                        <option value="">+86</option>
                        <option class="a" value="">中国澳门&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+853</option>
                        <option value="">中国台湾&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+886</option>
                        <option value="">中国香港&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+891</option>
                    </select><input class="mobile" type="number" placeholder="请输入手机号">
                </div>
                <div class="checkCode">
                    <input type="text" maxlength="4" placeholder="验证码">
                    <a href="javascript:;">获取验证码</a>
                </div>
                <div>
                    <a class="loginSoon" href="javascript:;">立即登录</a>
                </div>
                <div class="license">
                    <span>注册登录即表示</span><br>
                    <span>同意</span>
                    <a href="javascript:;">用户协议</a>
                    <span>、</span>
                    <a href="javascript:;">隐私政策</a>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jquery.js"></script>
    <script>
        userfaceCheck();
        function userfaceCheck(){
           let loginer =  window.sessionStorage.getItem('loginer');
           if(loginer == null){
                $('.userface').css('display','none');
                $('.loginBtn').css('display','block');
           }else{
                let name = JSON.parse(loginer).username.substr(0,1);
                $('.userface').css('display','block').html(name);
                $('.loginBtn').css('display','none');
                $('.write').css('display','none');
           }
        }

        $('.write').click(function(){
            let loginer =  window.sessionStorage.getItem('loginer');
            if(loginer == null){
                window.location.href = './login.html';
            }
        })
        
        $('.userfaceLi').mouseover(function(){
            $('.subMenu').css('display','block');
        })

        $('.userfaceLi').mouseout(function(){
            $('.subMenu').css('display','none');
        })

        $('#logoutBtn').click(function(){
            if(confirm('是否确定退出')){
                window.sessionStorage.removeItem('loginer');
                window.location.reload();
            }
        })
    </script>
</body>
</html>